<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/jiazai.css" />
		<style type="text/css">
			body {
				background: white;
			}
			
			#top-contr {
				padding: 10px 20px;
			}
			
			#content {
				padding: 0 20px;
			}
			
			.input,
			.input-pin {
				margin: 20px 0;
				padding: 8px 20px;
				background: #F5F8FF;
				border-radius: 5px;
			}
			
			input::-webkit-input-placeholder {
				font-size: 14px;
				color: #999;
			}
			
			.input>input,
			.input-pin>input {
				flex: 1 1 0;
				padding: 0;
				margin: 0;
				border: none;
				background: transparent;
			}
			
			.input>img {
				margin-left: 20px;
				flex: 0 0 18px;
			}
			
			.notice {
				padding-bottom: 10px;
				font-size: 12px;
				color: #FF2144;
			}
			
			button {
				width: 100%;
				padding: 15px 0;
				font-size: 15px;
				color: white;
				background: #93A0B9;
				border-radius: 5px;
				border: none;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<!-- 加载中动画 -->
			<div id='jiazai-ani' v-if='jiazai'>
				<div class="arc"></div>
				<h1><span>LOADING</span></h1>
			</div>
			<!-- 加载中动画 -->

			<div id="top-contr" class='dis-spa'>
				<img @tap='_close();' src="img/left.svg" style="width: 18px;height: 18px;" />
				<span>重置PIN</span>
				<span style="opacity: 0;width: 18px;">1</span>
			</div>
			<div id="content">
				<div class='dis-spa input'>
					<input :type="offShow?'text':'password'" placeholder="设置PIN（8-20位数字或字母）" v-model='pin' />
					<img @tap='offShow=!offShow' :src="offShow?'img/eyes-open.svg':'img/eyes-close.svg'" style="width:18px;height: 18px;" />
				</div>
				<div class="input-pin">
					<input :type="offShow?'text':'password'" placeholder="确认PIN" v-model='surePin' />
				</div>
				<p class='notice' v-text='notice'>两次密码输入有误</p>
				<button @tap='sure' :style="{'background':offColor?'#0c61ff':''}">确认</button>
			</div>
		</div>
		<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function(){
				app.$data.where=plus.webview.getWebviewById('index4');
			});
			var app = new Vue({
				el: '#app',
				data: {
					jiazai: false,
					//false:不显示密码  true:显示密码
					offShow:false,
					//输入检查的提示
					notice:'',
					//按钮颜色高亮
					offColor:false,
					pin:'',
					surePin:'',
					//字段为假，是首页里面的导入钱包流程   为真：说明是首页进来的导入钱包
					where:null,
				},
				watch:{
					pin:function(){
						this.notice='';
					},
					surePin:function(val){
						this.notice='';
						if(val.length>=8&&val.length<=20&&val==this.pin){
							this.offColor=true;
						}else{
							this.offColor=false;
						}
					}
				},
				methods: {
					sure: function() {
						if(this.pin.length<8||this.pin.length>20){
							this.notice='请输入正确的PIN';
							return;
						}
						if(this.pin!=this.surePin){
							this.notice='两次PIN输入不一致';
							return;
						}
						if(this.where){
							//是首页来的
							plus.webview.getWebviewById('importWallet').close('none');
							plus.webview.getWebviewById('myAccount').close('none');
							plus.webview.currentWebview().close('none');
						}else{
							localStorage.setItem('kui_user', 'jkjjj');
							var This = this;
							This.jiazai = true;
							var web = plus.webview.create('index.html', 'index');
							web.addEventListener("loaded", function() {
								This.jiazai = false;
								web.show('none');
								setTimeout(function() {
									web.evalJS("closeOth()");
								}, 300);
							}, false);
						}
					},
				}
			});
		</script>
	</body>

</html>